<template>
  <div class="banner-cont">
    <div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(banner, index) in banners" :key="index">
          <div class="banner-item">
            <img :src="banner" alt="">
          </div>
        </div>
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        '/images//banner/banner-1920-600.gif',
      ],
      swiperOption: {
        loop: false,
        slidesPerView: 1,
        centeredSlides: true,
        spaceBetween: 0,
        // pagination: {
        //   el: '.swiper-pagination',
        //   dynamicBullets: true
        // },
        // navigation: {
        //   nextEl: '.swiper-button-prev',
        //   prevEl: '.swiper-button-next',
        // },
        on: {
          slideChange() {
            console.log('onSlideChangeEnd', this);
          },
          tap() {
            console.log('onTap', this);
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.banner-item {
  width: 100%;

  img {
    width: 100%;
  }
}
</style>
